<template>
  <!-- 时间线控制容器 -->
  <div class="timeline-control">
    <!-- 控制按钮和选择器 -->
    <div class="controls">
      <!-- 播放速度选择器 -->
      <select v-model.number="speed" @change="updateSpeed" class="speed-select">
        <!-- 遍历速度数组，生成选项 -->
        <option v-for="s in speeds" :key="s" :value="s" :label="s + 'x'">{{ s }}x</option>
      </select>
      <!-- 播放/暂停按钮 -->
      <el-button size="small" type="primary" @click="play">{{ playing ? '暂停' : '播放' }}</el-button>
      <!-- 快退/停止按钮 -->
      <el-button size="small" class="ml10px mr10px" type="primary" @click="rewind">{{ playing ? '停止' : '快退'
        }}</el-button>
      <!-- 快进/停止按钮 -->
      <el-button size="small" type="primary" @click="fastForward">{{ playing ? '停止' : '快进' }}</el-button>
    </div>
    <!-- 时间线容器 -->
    <div class="timeline-container">
      <!-- 时间线滑块 -->
      <input type="range" min="0" :max="duration" v-model.number="stepTime" @input="updateTime"
        class="timeline-slider" />
      <!-- 时间标签 -->
      <div class="timeline-labels">
        <span>{{ formatTime(startTime) }}</span>
        <span class="current-time" v-if="startTime && duration"
          :style="`left: ${stepTime / duration * 100 > 45 ? stepTime / duration * 100 - 8 : stepTime / duration * 100 - 6}% `">{{
            formatTime(currentTime)
          }}</span>
        <span>{{ formatTime(endTime) }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, onMounted, watch } from 'vue';
import { MapUtils, MapUtils as Utils } from "../core/MapUtils";
import TimeLineManager from "../core/TimeLineManager";
export default defineComponent({
  name: 'TimelineControl',
  props: {
    speeds: { type: Array as () => number[], default: () => [0.5, 1, 2, 4], }, // 播放速度数组
  },
  setup(props) {
    let startTime = ref(0);  // 开始时间
    let endTime = ref(0);   // 结束时间
    let currentTime = ref(0);  //当前时间
    let duration = ref(0);  // 时长
    let stepTime = ref(0)  // 进度条
    // 播放速度
    const speed = ref(1);
    // 定时器ID
    const interval = ref<number | null>(null);
    // 播放状态
    const playing = ref(false);

    // 格式化时间为HH:MM:SS
    const formatTime = (seconds: number): string => {
      return Utils.getFormatClock(seconds);
    };

    // 计算时间标记
    // const getMarks = computed(() => {
    //   const marks = [];
    //   const interval = 5 * 60; // 每5分钟一个标记
    //   const totalMarks = Math.floor(props.duration / interval);

    //   for (let i = 0; i <= totalMarks; i++) {
    //     const time = i * interval;
    //     marks.push({
    //       time,
    //       percent: (time / props.duration) * 100,
    //     });
    //   }

    //   return marks;
    // });

    // 更新当前时间
    const updateTime = (event: Event) => {
      currentTime.value = startTime.value + (stepTime.value / duration.value) * (endTime.value - startTime.value);
    };

    // 播放/暂停
    const play = () => {
      timelineManager = (window as any).olMap.timeline
      const date = timelineManager.getTime()
      startTime.value = Number(date.startTime)
      endTime.value = Number(date.endTime)
      currentTime.value = startTime.value
      duration.value = Number(endTime.value - startTime.value)

      // 如果正在播放，清除定时器并暂停
      if (playing.value) {
        // debugger
        clearInterval(interval.value!);
        // 关闭订阅信息
        timelineManager.off()
        interval.value = null;
      } else {
        // debugger
        // 开启订阅
        timelineManager.start()
        // 计算每次定时器更新的间隔，单位是毫秒
        const step = 1000 / speed.value;  // 每隔 step 毫秒更新一次时间
        interval.value = window.setInterval(() => {
          // 更新当前时间，按每秒增加 speed.value 秒
          currentTime.value += speed.value * 1000;  // 每次递增 speed 秒 * 1000 毫秒
          stepTime.value = currentTime.value - startTime.value; // 更新滑块位置

          // 如果超出了结束时间，重置到开始时间
          if (currentTime.value > endTime.value) {
            currentTime.value = startTime.value;
          }
        }, step);
      }

      // 切换播放状态
      playing.value = !playing.value;
    };


    // 快退
    const rewind = () => {
      clearInterval(interval.value!);
      interval.value = null;
      currentTime.value = startTime.value;
      playing.value = false;
    };

    // 快进
    const fastForward = () => {
      clearInterval(interval.value!);
      interval.value = null;
      currentTime.value = endTime.value;
      playing.value = false;
    };

    // 更新播放速度
    const updateSpeed = () => {
      if (interval.value !== null) {
        clearInterval(interval.value);
        play(); // 以新速度重新开始
      }
    };
    let timelineManager: TimeLineManager
    // 组件挂载后执行的逻辑
    onMounted(() => {
    });

    // 监听当前时间变化
    watch(() => currentTime.value, (newValue) => {
      // 更新地图/图层等（此代码被注释掉了）
      timelineManager.currentTime = newValue
      timelineManager.updateSampledPositionProperty()
    });

    // 返回给模板使用的数据和方法
    return {
      currentTime,
      speed,
      playing,
      startTime,
      endTime,
      duration,
      formatTime,
      updateTime,
      play,
      rewind,
      fastForward,
      updateSpeed,
      stepTime
      // getMarks,
    };
  },
});
</script>

<style scoped lang="scss">
/* 样式定义 */
.timeline-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  border-radius: 3px;
  color: #fff;
  margin-bottom: 10px;
}

.timeline-container {
  position: relative;
  width: 100%;
  margin: auto;
}

.timeline-scale {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  pointer-events: none;
}

.scale-mark {
  position: absolute;
  bottom: 30px;
  width: 1px;
  height: 10px;
  background-color: #fff;
}

.scale-label {
  position: absolute;
  bottom: 15px;
  transform: translateX(-50%);
  color: #fff;
  font-size: 12px;
}

.timeline-slider {
  width: 100%;
  height: 20px;
  // padding-bottom: 8px;
}

.timeline-labels {
  position: absolute;
  top: 120%;
  left: 0;
  right: 0;
  text-shadow: 1px 1px 4px #000, -1px -1px 4px #000;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 11px;

}

.controls {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 1%;
  width: 100%;
}



.speed-select {
  width: 40px;
  margin-right: 10px;
  border-radius: 5px;
  border: none;
  outline: none;

  option {
    font-size: 12px;
  }
}

:deep(.el-button) {
  height: 25px;
  padding: 1px 5px;
}

.current-time {
  display: block;
  position: absolute;
  top: -45px;
  text-align: center;
  font-size: 12px;
  color: #000;
  background-color: #fff;
  padding: 2px 3px;
  box-sizing: border-box;
  border-radius: 5px;
  text-shadow: none;

  // 下三角
  &::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 8px solid #fff;
  }
}
</style>
